<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			
			<tab-bar @myevent="getchild"></tab-bar>
		</div>
		<script type="text/javascript">
			Vue.component("tabBar",{
				template:`
					<div style="background:blue;color:white;">
					 子组件--<button @click="sendData">点击传递数据给父组件</button>
					                </div>`,
									data(){
										return{
											childData:"子组件的信息"
										}
									},
				methods:{
					sendData(){
						this.$emit("myevent",this.childData);
					}
				}
				
				
			})
			const vm=new Vue({
				el:"#box",
				methods:{
					getchild(data){
						console.log("输出子组件的参数:"+data);
					}
				}
			})
		</script>
	</body>
</html>
